import React, { FC, useState } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { useChagePersonalInfo, ChagePersonalInfoContext } from './ChagePersonalInfoContext';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import BaseInfo from './BaseInfo/BaseInfo';
import ChangeNickName from './ChangeNickName/ChangeNickName';
import ChangeAvatar from './ChangeAvatar/ChangeAvatar';
import RootPageComponentGotoMenu from '@/pages/components/RootPageComponentGotoMenu/RootPageComponentGotoMenu';
export interface IProps extends ICompProps {}
ChagePersonalInfo.defaultProps = {} as Partial<IProps>;
function ChagePersonalInfo(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('ChagePersonalInfo', className);
    const { userInfo, showComponent, setShowComponent, getUserInfo } = useChagePersonalInfo();
    const navTitle = {
        BaseInfo: '个人信息',
        ChangeNickName: '修改昵称',
        ChangeAvatar: '修改头像',
    };
    return (
        <ChagePersonalInfoContext.Provider value={{ userInfo, showComponent, setShowComponent, getUserInfo }}>
            <RootView className={localClassName} style={style}>
                <RootPageComponent
                    leftTitle={navTitle[showComponent]}
                    headNavContentRightSlot={<RootPageComponentGotoMenu />}>
                    <View className="Mine_container">
                        <BaseInfo style={{ display: showComponent === 'BaseInfo' ? 'block' : 'none' }}></BaseInfo>
                        <ChangeNickName
                            style={{ display: showComponent === 'ChangeNickName' ? 'block' : 'none' }}></ChangeNickName>
                        <ChangeAvatar
                            style={{ display: showComponent === 'ChangeAvatar' ? 'block' : 'none' }}></ChangeAvatar>
                    </View>
                </RootPageComponent>
            </RootView>
        </ChagePersonalInfoContext.Provider>
    );
}
export default React.memo(ChagePersonalInfo as FC<IProps>);
const RootView = styled(View)`
    &.ChagePersonalInfo {
        .Mine_container {
        }
    }
`;
